<template>
  <div>
    <!-- 3D预览 -->
    <a-modal
      :z-index="900"
      :footer="null"
      width="100%"
      cancel-text="关闭"
      wrap-class-name="full-modal"
      :visible="visible"
      :forceRender="true"
      :maskClosable="false"
      title="预览模型"
      :body-style="{ padding: '1px !important' }"
      @update:visible="updateVisible"
      @close="updateVisible(false)"
    >
      <div class="wrap">
        <iframe
          v-if="isShowIframe"
          ref="frameRef"
          :src="frameSrc"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
        <div class="btnFooter">
          <a-tooltip title="刷新">
            <a-button type="primary" shape="circle" :size="large" style="margin-right: 10px" @click="doSyncLoad">
              <template #icon>
                <!--<ReloadOutlined />-->
                <SyncOutlined />
                <!--<LoadingOutlined />-->
              </template>
            </a-button>
          </a-tooltip>
          <a-radio-group v-model:value="operBtn" button-style="solid" @change="doOperChange">
            <a-radio-button value="1">3D预览</a-radio-button>
            <a-radio-button value="2">剖面图</a-radio-button>
            <a-radio-button value="3">爆炸图</a-radio-button>
            <a-radio-button value="4">元数据</a-radio-button>
            <a-radio-button value="5">结构树</a-radio-button>
            <a-radio-button value="6">PMI</a-radio-button>
            <a-radio-button value="7">测量</a-radio-button>
            <a-radio-button value="8">识别</a-radio-button>
            <a-radio-button value="9">备注</a-radio-button>
          </a-radio-group>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { WEB_VIEWER_URL } from '/@/config/settings';
import {reactive, ref, watch, onMounted, unref} from 'vue';
import { ModelMgmtApi } from '/@/api/datadigital/modelMgmt/ModelMgmtApi';

const props = defineProps<{
  // 弹窗是否打开
  visible: Boolean;
  // 修改回显的数据
  data?: Object;
}>();

const isShowIframe = ref(true);
const frameSrc = ref<any>(WEB_VIEWER_URL + '/treeview/index.html?path=' + props.data);
const operBtn = ref('5');
const frameRef = ref<HTMLFrameElement>();

const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
  (e: 'done'): void;
}>();

const state = reactive({
  form: {},
});

const updateVisible = (value: boolean) => {
  emits('update:visible', value);
};

const doOperChange = () => {
  // console.log('operBtn='+operBtn.value);
  if (operBtn.value == '1') {//3D预览
    frameSrc.value = WEB_VIEWER_URL + '/basic3dviewer/index.html?path=' + props.data;
  } else if (operBtn.value == '2') {//剖面图
    frameSrc.value = WEB_VIEWER_URL + '/sectioning/index.html?path=' + props.data;
  } else if (operBtn.value == '3') {//爆炸图
    frameSrc.value = WEB_VIEWER_URL + '/exploder/index.html?path=' + props.data;
  } else if (operBtn.value == '4') {//元数据
    frameSrc.value = WEB_VIEWER_URL + '/modelexplorer/index.html?path=' + props.data;
  } else if (operBtn.value == '5') {//结构树
    frameSrc.value = WEB_VIEWER_URL + '/treeview/index.html?path=' + props.data;
  } else if (operBtn.value == '6') {//PMI
    frameSrc.value = WEB_VIEWER_URL + '/pmiviewer/index.html?path=' + props.data;
  } else if (operBtn.value == '7') {//测量
    frameSrc.value = WEB_VIEWER_URL + '/measurements/index.html?path=' + props.data;
  } else if (operBtn.value == '8') {//识别
    frameSrc.value = WEB_VIEWER_URL + '/selectionhandling/index.html?path=' + props.data;
  } else if (operBtn.value == '9') {//备注
    frameSrc.value = WEB_VIEWER_URL + '/notes/index.html?path=' + props.data;
  }
};

const doSyncLoad = () => {
  isShowIframe.value = false;

  setTimeout(() => {
    isShowIframe.value = true;
  }, 100);

}

// 初始化
const init = () => {
  if (props.data) {
    state.form = Object.assign({}, props.data);
  } else {
    state.form = {};
  }

  // console.log('props.data = ' + props.data);
};

onMounted(() => {
  init();
});

watch(
  () => props.data,
  (val) => {
    init();
  },
);

</script>

<style lang="less">
  .wrap {
    padding: 1px;
    width: 100%;
    height: 100%;
  }
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }
  .btnFooter{
    height: 35px;
    line-height: 35px;
    position: absolute;
    bottom: 10px;
    right: 15px;
  }
</style>
